.DocsLink {
  border: 1px solid var(--bs-secondary-border-subtle);
  border-radius: var(--border-radius, 1rem);
  display: flex;
  gap: var(--space-large, 1rem);
  padding: var(--space-large, 1rem);
  position: relative;
  place-self: stretch;
  background: var(--bs-body-bg, var(--bs-secondary-border-subtle));
  opacity: .9;
  transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;

  &:hover {
    transform: translateY(-.25rem);
    opacity: 1;
  }

  &.DocsLink-sm {
    border-radius: var(--border-radius-sm, .5rem);
    height: 52px;
    opacity: 1;
    padding: var(--space-small, .75rem) var(--space-large, 1.5rem);
    transform: translateY(50%);
    transition-property: transform;
    transition-duration: 0ms;

    p {
      margin-bottom: 0;
    }

    svg {
      font-size: 1.5rem;
    }

    &:hover {
      transform: translateY(50%);
    }

    @media screen and (max-width: 768px) {
      transform: translateY(0);

      &:hover {
        transform: translateY(0);
      }
    }
  }
}
.DocsLink_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
}

.DocsLink_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
}

.DocsLink_link {
  &:after {
    content: '';
    position: absolute;
    inset: 0 0;
    z-index: 40;
  }
}

.DocsLink_arrow {
  font-size: 1.5rem;
  opacity: .5;
  margin-inline-start: auto;
  transition: opacity 600ms ease-in-out;
  .DocsLink:hover & {
    transition: opacity 250ms ease-in-out;
    opacity: 1;
  }
}

.DocsLink_description {
  p {
    line-height: 1.4;
  }
  :last-child {
    margin-bottom: 0;
  }
}
